window.addEventListener('load', function() {
  var $ = document.querySelector.bind(document);

  /**案例：让box盒子，从左向右移动100px 。
   * 过1s后，再向右移动200px。
   * 再过1s后，向左移动50px
   * 再过1s后，再向左移动（100 * 360 / 1080）px
   * 最后，过1s，移动到原点
  */
  var box = $('.box');
  animate(box, 0, 100, function() {
    setTimeout(function() {
      animate(box, box.offsetLeft, box.offsetLeft + 200, function() {
        setTimeout(function() {
          animate(box, box.offsetLeft, box.offsetLeft - 50, function() {
            setTimeout(function() {
              animate(box, box.offsetLeft, box.offsetLeft - (100 * 360 / 1080), function() {
                setTimeout(function() {
                  animate(box, box.offsetLeft, 0);
                }, 1000)
              })
            }, 1000)
          })
        }, 1000)
      })
    }, 1000)
  })

  // animate函数变量注释
  /**
   * obj表示移动盒子的dom
   * start表示盒子开始移动的位置，不带单位
   * end表示盒子移动结束的位置，不带单位
   * cb表示盒子移动结束后执行的回调函数，可略。
   * 
   * getAttr函数是获取obj.style.left的值
   * 因为obj.offsetLeft是自动取整的，有误差，所以需要不断做调整
   */

  /**animate移动函数 */
  function animate(obj, start, end, cb) { 
    function getAttr(obj) {
      return parseFloat(window.getComputedStyle(obj).left);
    }
    var _dif = getAttr(obj) - start;
    start = start == getAttr(obj) ? start : getAttr(obj);
    end = end + _dif;
    var step = (end - start) / 10;
    var n = 1;
    clearInterval(timer)
    function move() {
      obj.style.left = start + step * n + 'px';
      if(step >= 0) {
        if(obj.offsetLeft >= parseInt(end)) { 
          obj.style.left = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
          clearInterval(timer);
          cb && cb();
        }
      } else if(step <= 0) {
        if(obj.offsetLeft <= parseInt(end)) {
          obj.style.left = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
          clearInterval(timer);
          cb && cb();
        }
      }
      n++;
    }
    var timer = setInterval(move, 30);
  }
})